<!DOCTYPE HTML>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>添加删除记录练习</title>
    <link rel="stylesheet" type="text/css" href="css.css" />
    <script type="text/javascript">
        /*
         功能说明:
         1. 点击'Submit', 根据输入的信息在表单中生成一行员工信息
         2. 点击Delete链接, 提示删除当前行信息, 点击确定后删除信息
         技术要点:

         */
    </script>
</head>
<body ng-app="myApp" >
<!--
1、先写基本的页面结构
2、初始化员工信息
3、页面上写基本的关联指令
4、绑定事件函数
-->


<div ng-controller="MyController">
    <table id="employeeTable">
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Salary</th>
            <th></th>
        </tr>
        <tr ng-repeat="emp in emps">
            <td>{{emp.name}}</td>
            <td>{{emp.email}}</td>
            <td>{{emp.salary}}</td>
            <td><a href="#" ng-click="delete($index)">delete</a></td>
        </tr>
    </table>
    <div id="formDiv">
        <h2>新添加的员工</h2>
        name: <input type="text" ng-model="emp.name">
        email: <input type="text"ng-model="emp.email">
        salary: <input type="text" ng-model="emp.salary">
        <button ng-click="send()">提交</button>
    </div>


</div>



<script type="text/javascript" src="../../js/angular-1.5.5/angular.js"></script>
<script type="text/javascript">
    angular.module('myApp', [])
            .controller('MyController', function ($scope) {
                //初始化数据
                $scope.emps = [
                    {name : 'kobe', email : 'kobe@163.com', salary : 1000000000},
                    {name : 'wade', email : 'wade@163.com', salary : 1200000000},
                    {name : 'anverson', email : 'anverson@163.com', salary : 800000000}
                ];

                //定义删除的方法
                $scope.delete = function (index) {
                    //获取delete所在的当前对象
                    var emp = this.emps[index];
                    if(confirm('你确认删除' +  emp.name +  '吗？')){
                        $scope.emps.splice(index, 1);
                    }
                };
                //定义提交的方法
                $scope.send = function () {
                    //判断添加的员工的信息是否为空
                    if(!$scope.emp){
                        alert('输入的信息不能为空');
                        return;
                    }
                    //判断输入的信息是否完整
                    if(!$scope.emp.name || !$scope.emp.email || !$scope.emp.salary){
                        alert('输入的信息必须完整');
                        return;
                    }
                    $scope.emps.push($scope.emp);
                    $scope.emp = null;
                }
            })
</script>
</body>

</html>